<script setup lang="ts">
import { ref } from "vue";
import ReCol from "@/components/ReCol";
import { formRules } from "../utils/rule";
import { FormProps } from "../utils/types";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import Delete from "@iconify-icons/ep/delete";
import AddFill from "@iconify-icons/ep/plus";

const props = withDefaults(defineProps<FormProps>(), {
  formInline: () => ({
    title: "新增",
    bizType: 1,
    name: "",
    password: "",
    phone: "",
    roleIdList: [],
    storeIdList: [],
    storeTreeData: [],
    roleStoreList: []
  })
});

const ruleFormRef = ref();
const newFormInline = ref(props.formInline);

const addRole = () => {
  newFormInline.value.roleStoreList.push({
    roleId:
      newFormInline.value.roleOptions.length > 0
        ? newFormInline.value.roleOptions[0].id
        : "",
    storeIds: []
  });
};

const delRole = index => {
  newFormInline.value.roleStoreList.splice(index, 1);
};

function getRef() {
  return ruleFormRef.value;
}

defineExpose({ getRef });
</script>

<template>
  <el-form
    ref="ruleFormRef"
    :model="newFormInline"
    :rules="formRules"
    label-width="80px"
    class="mb-[15px]"
  >
    <el-row class="mr-[30px]">
      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item label="姓名" prop="name">
          <el-input
            v-model="newFormInline.name"
            clearable
            placeholder="请输入"
          />
        </el-form-item>
      </re-col>
      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item label="账号" prop="phone">
          <el-input
            v-model="newFormInline.phone"
            clearable
            autocomplete="new-password"
            placeholder="请输入"
          />
        </el-form-item>
      </re-col>
      <re-col v-if="newFormInline.title === '新增'" :value="12">
        <el-form-item label="密码" prop="password">
          <el-input
            v-model="newFormInline.password"
            type="password"
            autocomplete="new-password"
            show-password
            clearable
            placeholder="请输入"
          />
        </el-form-item>
      </re-col>
    </el-row>

    <!-- 门店、角色配置 -->
    <div class="role-box">
      <div class="r-title">角色配置</div>
      <div
        v-for="(item, index) in newFormInline.roleStoreList"
        :key="index"
        class="r-item"
      >
        <el-form-item
          label="角色"
          prop="bizType"
          :rules="[
            { required: true, message: '请选择角色', trigger: 'change' }
          ]"
          class="w-[250px]"
        >
          <el-select
            v-model="item.roleId"
            placeholder="请选择"
            class="w-full"
            filterable
          >
            <el-option
              v-for="(item, index) in newFormInline.roleOptions"
              :key="index"
              :value="item.id"
              :label="item.name"
            >
              {{ item.name }}
            </el-option>
          </el-select>
        </el-form-item>
        <div class="flex-1 flex items-center">
          <el-form-item label="适用门店" prop="storeIds" class="flex-1">
            <el-tree-select
              v-model="item.storeIds"
              filterable
              show-checkbox
              check-on-click-node
              multiple
              clearable
              :collapse-tags="item.storeIds.length > 3"
              node-key="id"
              :data="newFormInline.storeTreeData"
            />
          </el-form-item>
          <IconifyIconOffline
            class="r-icon mb-[18px] text-red-500"
            :icon="Delete"
            @click="delRole(index)"
          />
        </div>
      </div>

      <el-button
        plain
        class="!block w-full !my-4"
        :icon="useRenderIcon(AddFill)"
        @click="addRole"
      >
        添加角色
      </el-button>
    </div>
  </el-form>
</template>
<style lang="scss" scoped>
.role-box {
  padding: 10px 10px 0;
  border: 1px solid #dcdfe6;
  border-radius: 5px;
  .r-title {
    font-weight: bold;
    margin-bottom: 10px;
  }
  .r-item {
    display: flex;
    align-items: flex-start;
  }
  .r-icon {
    width: 18px;
    height: 18px;
    cursor: pointer;
    margin-left: 8px;
  }
}
</style>
